<template>
	<view class="feedback">
		<textarea cols="30" rows="10" :disabled='!mode' v-model="feedbackText" placeholder="请输入您的建议"></textarea>
		<view class="img-box">
			<view :class="['img', {'ac': mode}]" v-for="(item, index) in imgs" :key='index'>
				<image class="cover" :src="item" @tap="previewImg(index)"></image>
				<image class="icon-close" src="/static/img/mine/close.png" @tap="deleteImg(index)"></image>
			</view>
			<view class="add" @tap="chooseImgs" v-if="imgs.length<3 && mode==1">
				<image src="/static/img/mine/add.png"></image>
			</view>
		</view>
		<view v-if='mode' class="commit" @tap="commitDeedback">提交建议</view>
	</view>
</template>

<script>
	import storage from '@/commen/utils/storage'
	import {commitFeedback} from '@/commen/js/config'
	
	export default {
		data() {
			return {
				imgs: [], // 反馈图片组
				newImgs: [], // 当前新增图片
				imgText: '', // 上传的网络图片集合,字符串
				feedbackText: '', // 建议
				mode: 1, // 当时图片模式，0为只读，1为编辑
			};
		},
		computed: {
			// 当前可选图片
			selectImgLen() {
				return 3-this.imgs.length
			}
		},
		methods: {
			// 选择图片(当前可选)
			async chooseImgs() {
				let [err, res] = await this.$chooseImgs(this.selectImgLen)
				if (err) return
				this.imgs = this.imgs.concat(res)
				this.newImgs = res // 本次新增
				this.uploadImgs()
			},
			// 上传本次新增图片
			async uploadImgs() {
				for (const item of this.newImgs) {
					const [err, res] = await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'https://yizhimao.onebity.com/api/ImageUpload',
							filePath: item,
							name: 'file',
							success: (uploadFileRes) => {
								resolve(uploadFileRes.data)
							},
							fail: (err) => {
								reject(err)
							}
						});
					}).then(res => [err, res]).catch(err => [err])
					this.imgText += res + ','
				}
			},
			// 查看图片
			previewImg(index) {
				this.$previewImg({
					current: index,
					urls: this.imgs,
				})
			},
			// 删除当前图片以及对应的网络字符串图片
			deleteImg(index) {
				// 删除当前图片
				this.imgs.splice(index, 1)
				// 删除对应的网络图片
				let cacheImg = this.imgText.split(',')
				cacheImg.splice(index, 1)
				this.imgText = cacheImg.join()
			},
			// 提交反馈
			async commitDeedback() {
				// 清楚末尾,号
				this.imgText = this.imgText.slice(0, this.imgText.length - 1)
				// 提交
				const params = {
					token: storage.get('token'),
					content: this.feedbackText,
					images: this.imgText
				}
				const [err, res] = await commitFeedback(params)
				if (!res) return
				this.$toast('反馈成功')
				// 进入只读
				this.mode = 0
				setTimeout(function() {
					uni.navigateBack()
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.feedback {
		@include box-w(100%);

		textarea {
			@include box(100%, 320rpx, $bg-d);
			@include font-set($font-a, $color-g);
			padding: 40rpx 30rpx;
		}

		.img-box {
			position: relative;
			@include box-h(200rpx, $bg-g);
			@include flex-row(flex-start);
			padding: 32rpx 30rpx;

			.img,
			.add {
				position: relative;
				@include square(136rpx);
				border: 1rpx solid $bg-a;
				@include flex-row();

				&~.img {
					margin-left: 24rpx;
				}

				&~.add {
					margin-left: 24rpx;
				}
			}

			.img {
				&.ac {
					.icon-close {
						display: block;
						@include right-top(-14rpx, -14rpx);
						@include circle(28rpx);
					}
				}

				.icon-close {
					display: none;
				}

				.cover {
					@include square(100%);
				}
			}

			.add {
				&::after {
					content: '最多3张';
					@include font-set($font-b, $color-g);
					@include right-bottom(-120rpx, 10rpx);
				}

				&>image {
					@include square(26rpx);
				}
			}
		}

		.commit {
			@include box(296rpx, 100rpx, $bg-a);
			@include font-set($font-a, $color-a);
			@include flex-row();
			border-radius: 10rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.3);
			margin: 156rpx auto 0;
			letter-spacing: 5rpx;
		}
	}
</style>
